<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('credit.xyf')" :leftIcon="true"></navbar>

		<!-- 信用分展示区域 -->
		<view class="credit-container">
			<!-- 信用分仪表盘 -->
			<view class="credit-dashboard">
				<image class="credit-bg" src="/static/image/my/bg6.svg" mode="aspectFit"></image>
				<view class="credit-score">
					<text class="score-number">{{ creditScore }}</text>
					<text class="score-text">{{ getCreditLevel(creditScore) }}</text>
				</view>
				<!-- 				<view class="credit-score">
					<text class="score-number">90</text>
					<text class="score-text">{{'信誉'+ creditMessage }}</text>
				</view>
				<view class="credit-score">
					<text class="score-number">80</text>
					<text class="score-text">{{'信誉'+ creditMessage }}</text>
				</view>
				<view class="credit-score">
					<text class="score-number">70</text>
					<text class="score-text">{{'信誉'+ creditMessage }}</text>
				</view> -->
			</view>

			<!-- 信用分说明 -->
			<view class="credit-message">
				<!-- <text class="credit-message-text">{{ t('credit.gxnxdxydjh') }}</text> -->
				<text class="credit-message-text">
					{{t('credit.gxnxdxydjh')}}{{ getCreditLevel(creditScore) }}！
				</text>
			</view>

			<!-- 信用分说明列表 -->
			<view class="credit-info">
				<view class="credit-info-title">{{ t('credit.sm') }}：</view>

				<view class="credit-info-item">
					<text class="item-number">1.</text>
					<text class="item-text">{{ t('credit.xyfdbndztpbx') }}</text>
				</view>

				<view class="credit-info-item">
					<text class="item-number">2.</text>
					<text class="item-text">{{ t('credit.xyffwd') }}</text>
				</view>

				<view class="credit-info-item">
					<text class="item-number">3.</text>
					<text class="item-text">{{ t('credit.gfdsdb') }}</text>
				</view>

				<view class="credit-info-item">
					<text class="item-number">4.</text>
					<text class="item-text">{{ t('credit.wmjcjcndzhxywhjzgx') }}</text>
				</view>

				<view class="credit-info-item">
					<text class="item-number">5.</text>
					<text class="item-text">{{ t('credit.rgndxyfyy') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	
	const {
		t,
		locale
	} = useI18n();
	
	// 信誉分数据
	const creditScore = ref(100);
	const creditMessage = ref(t('credit.jh')); //极好、良好、一般、极差
	
	// 根据信誉分获取对应的等级描述
	const getCreditLevel = (score) => {
		if (score >= 100) {
			return t('credit.xydjh'); // 信誉等级好
		} else if (score >= 90) {
			return t('credit.jh'); // 极好
		} else if (score >= 80) {
			return '良好';
		} else if (score >= 70) {
			return '一般';
		} else {
			return '极差';
		}
	};
	
	// 页面加载时获取URL参数
	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const options = currentPage.options;
		
		if (options.creditScore) {
			creditScore.value = parseInt(options.creditScore) || 100;
		}
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.credit-container {
		padding: 30rpx 40rpx;
	}

	.credit-dashboard {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.credit-bg {
		width: 360rpx;
		height: 272rpx;
	}

	.credit-score {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.score-number {
		font-size: 55.82rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 80.83rpx;
		color: rgba(13, 179, 100, 1);
		padding-top: 88.4rpx;
	}

	.score-text {
		font-size: 31.4rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 45.46rpx;
		color: rgba(61, 62, 82, 1);
		// margin-top: 10rpx;
	}

	.credit-message {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.credit-message-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.credit-info {
		// background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
	}

	.credit-info-title {
		font-size: 31.4rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 45.46rpx;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 34.89rpx;
	}

	.credit-info-item {
		// display: flex;
		font-size: 31.4rpx;
		font-weight: 300;
		letter-spacing: 0rpx;
		line-height: 45.46rpx;
		color: rgba(0, 0, 0, 1);
		margin-bottom: 45.46rpx;
	}

	.item-number {
		// font-size: 28rpx;
		// color: #333;
		margin-right: 4rpx;
	}

	.item-text {
		// font-size: 28rpx;
		// color: #333;
		// line-height: 1.5;
	}
</style>